/*
  Using !important with some of the components is a workaround for Tailwind
  CSS's having too much precedence.
  https://github.com/wasp-lang/wasp/issues/1764
*/

.form {
  margin-top: 1.5rem;
}

.formItemGroup {
  /* Empty class to use as marker */
}

.formItemGroup + .formItemGroup {
  margin-top: 1.5rem;
}

.formLabel {
  display: block !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
}

.formInput,
.formTextarea {
  display: block !important;
  line-height: 1.5rem !important;
  font-size: var(--font-size-sm) !important;
  border-width: 1px !important;
  border-color: var(--color-gray600) !important;
  background-color: #f8f4ff !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  border-radius: 0.375rem !important;
  width: 100% !important;
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  margin: 0 !important;
}

.formInput:focus,
.formTextarea:focus {
  border-width: 1px !important;
  border-color: var(--color-gray700) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  outline: none;
}

.formInput:disabled,
.formTextarea:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background-color: var(--color-gray400) !important;
  border-color: var(--color-gray400) !important;
  color: var(--color-gray500) !important;
}

.formError {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-formErrorText);
  margin-top: 0.5rem;
}

.submitButton {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  border-width: 1px !important;
  border-color: var(--color-brand) !important;
  background-color: var(--color-brand) !important;
  color: var(--color-submitButtonText) !important;
  padding: 0.5rem 0.75rem !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  font-weight: 600 !important;
  font-size: var(--font-size-sm) !important;
  line-height: 1.25rem !important;
  border-radius: 0.375rem !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 100ms !important;
  cursor: pointer;
}

.submitButton:hover {
  background-color: var(--color-brandAccent) !important;
  border-color: var(--color-brandAccent) !important;
}

.submitButton:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background-color: var(--color-gray400) !important;
  border-color: var(--color-gray400) !important;
  color: var(--color-gray500) !important;
}
